<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
    <title>user</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/im.css">
    <style>
        html,
        body {
            /* height: 100%; */
            overflow: hidden
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="tab_title">
            <ul>
                <li>医生详情</li>
                <li>我的订单</li>
                <li class="t_active">咨询</li>


            </ul>
        </div>
        <div class="tab_content">
            <div>
                <!-- <input type="file" id='image' accept="image/*" capture='camera'> -->
            </div>
            <div>
                <!-- <input type="file" name="file" id="cameraInput" class="file" value="" accept="image/jpeg,image/jpeg,image/png,image/bmp" multiple /> -->

            </div>

            <div class="c_on">
                <div class="chat_content">

                    <!-- 时间 -->
                    <div class="time">
                        <span>2017-10-20 11:30</span>
                    </div>



                    <!-- 自己 普通文字-->
                    <div class="me top_30 flexs">
                        <div class="head">
                            <img src="images/head_1.png" alt="">
                        </div>
                        <div class="text_t margin_right">
                            <span>您好！</span>
                        </div>
                    </div>

                    <!-- 对方 -->
                    <div class="yours top_30 flexs">
                        <div class="head">
                            <img src="images/head_1.png" alt="">
                        </div>
                        <div class="text_t margin_left">
                            <span>您好，我是左炙医师，欢迎来咨询！
                                由于医院工作比较繁忙，未能及时回复，尽情谅解！</span>
                        </div>
                    </div>

                    <!-- 自己 普通文字-->
                    <div class="me top_30 flexs">
                        <div class="head">
                            <img src="images/head_1.png" alt="">
                        </div>
                        <div class="text_t margin_right">
                            <span>我最近咳嗽比较厉害</span>
                        </div>
                    </div>

                    <!-- 自己 普通文字-->
                    <div class="me top_30 flexs">
                        <div class="head">
                            <img src="images/head_1.png" alt="">
                        </div>
                        <div class="text_t margin_right">
                            <span>干咳，没有痰。量过体温也没有发热，已经持续三天了</span>
                        </div>
                    </div>



                    <!-- 对方 预诊单 -->
                    <div class="yours top_30 flexs">
                        <div class="head">
                            <img src="images/head_1.png" alt="">
                        </div>
                        <div class="text margin_left min_width">
                            <div class="m_title">
                                <span class="icon_11"></span>
                                <span>预诊单</span>
                            </div>
                            <div class="text4">
                                <span>我刚刚给您发送了一份预诊单，请如实填写，方便我为您提供建议。 </span>
                                <a href="">点击查看详情</a>
                            </div>
                        </div>
                    </div>
                    <!-- 自己 预诊单 （已完成）-->
                    <div class="me top_30 flexs">
                        <div class="head">
                            <img src="images/head_1.png" alt="">
                        </div>
                        <div class=" margin_right combination max_windth ">
                            <div class="c_title">
                                <span class="icon_10"></span>
                                <span>预诊单（已完成）</span>
                            </div>
                            <div class="text3">
                                <span class="user2">用户：陈秀荣，男，33岁<br>主诉：喉咙很痛，眼睛也很痛，还咳嗽，流鼻涕，拉肚子，腰酸背痛腿抽筋，吃不好，睡不好，穿不暖，</span>
                                <a href="">点击查看</a>
                            </div>
                        </div>
                    </div>


                    <!-- 对方 随访单 -->
                    <div class="yours top_30 flexs">
                        <div class="head">
                            <img src="images/head_1.png" alt="">
                        </div>
                        <div class="text margin_left min_width">
                            <div class="m_title">
                                <span class="icon_13"></span>
                                <span>随访单</span>
                            </div>
                            <div class="text4">
                                <span>我刚刚给您发送了一份随访单，想了解您的近况，请尽快填写。  </span>
                                <a href="">点击查看详情</a>
                            </div>
                        </div>
                    </div>

                    <!-- 时间 -->
                    <div class="time">
                        <span>2017-10-29 1:30</span>
                    </div>

                    <!-- 自己 随访单已完成 -->
                    <div class="me top_30 flexs">
                        <div class="head">
                            <img src="images/head_1.png" alt="">
                        </div>
                        <div class=" margin_right combination max_windth ">
                            <div class="c_title">
                                <span class="icon_12"></span>
                                <span>随访单（已完成）</span>
                            </div>
                            <div class="text3">
                                <span class="user2">用户：陈秀荣，男，33岁<br>病情变化：喉咙很痛，眼睛也很痛，还咳嗽，流鼻涕，拉肚子，腰酸背痛腿抽筋，吃不好，睡不好，穿不暖，</span>
                                <a href="">点击查看</a>
                            </div>
                        </div>
                    </div>

                    <!-- 对方 用药建议 -->
                    <div class="yours top_30 flexs">
                        <div class="head">
                            <img src="images/head_1.png" alt="">
                        </div>
                        <div class="text margin_left min_width">
                            <div class="m_title">
                                <span class="icon_15"></span>
                                <span>用药建议</span>
                            </div>
                            <div class="text4">
                                <span>我刚刚给您发送了一份用药建议，请您查看。  </span>
                                <a href="">点击查看详情</a>
                            </div>
                        </div>
                    </div>


                    <!-- 自己 付款成功 -->
                    <div class="me top_30 flexs">
                        <div class="head">
                            <img src="images/head_1.png" alt="">
                        </div>
                        <div class=" margin_right combination max_windth ">
                            <div class="c_title">
                                <span class="icon_16"></span>
                                <span>付款成功</span>
                            </div>
                            <div class="text3">
                                <span class="user2">用户：陈秀荣，男，33岁<br>订单金额：200元<br>订单类型：中药饮片<br>订单方式：代煎代送</span>
                                <a href="">点击查看</a>
                            </div>
                        </div>
                    </div>

                    <!-- 自己 图片 -->
                    <div class="me top_30 flexs">
                        <div class="head">
                            <img src="images/head_1.png" alt="">
                        </div>
                        <div class="m_img">
                            <img src="images/payy.png" alt="">
                        </div>
                    </div>

                </div>
            </div>


        </div>
        <div class="chat_bottom">
            <div class="chat_inpit">
                <div class="input_c" contenteditable="true"></div>
                <span class="icon_20">
                    <input type="file" name="file" id="cameraInput" contenteditable="plaintext-only" class="file" value="" accept="image/*" multiple />
                </span>
                <span class="send_out2">发送</span>
            </div>
        </div>
    </div>

    <div class="popup">
        <div class="backg"></div>
        <div class="imgBox">
            <!-- <div></div>
            <span>发送</span>
            <img src="images/payy.png" alt=""> -->
        </div>
        <div class="android_up">
            <div class="a_u_title">
                <span>图片</span>
                <span></span>
            </div>
            <div class="camera_a">
                <span class="camera_i"></span>
                <span>相机</span>
                <input type="file" name="file" id="cameraInput1" class="file" value="" accept="image/*" capture='camera'>
            </div>
            <div class="album">
                <span class="album_i"></span>
                <span>相册</span>
                <input type="file" name="file" id="cameraInput2" class="file" value="" accept="image/jpeg,image/jpeg,image/png,image/bmp" multiple />
            </div>
        </div>
    </div>
    <script src="js/RongIMLib-2.2.8.min.js"></script>
    <script src="js/jquery-1.8.3.js"></script>
    <script src="js/im.js"></script>
    <script>
        (function() {
            var appKey = "3argexb6r934e";
            var token = "b/jvjEFD41TIVT0nsf9+L3ryPPkHsvRwWZV8SVI5ICcZ2I5Nl4OdNO01OjZxjjmVlD2dmk4RZ90=";

            RCS.init({
                appKey: appKey,
                token: token,
                target: document.getElementById('rcs-app'),
                showConversitionList: true,
                templates: {
                    button: ['<div class="rongcloud-consult rongcloud-im-consult">',
                        '   <button onclick="RCS.showCommon()"><span class="rongcloud-im-icon">进入 IM</span></button>',
                        '</div>',
                        '<div class="customer-service" style="display: none;"></div>'
                    ].join('')

                },
                extraInfo: {
                    // 当前登陆用户信息
                    userInfo: {
                        name: "游客",
                        grade: "VIP"
                    },
                    // 产品信息
                    requestInfo: {
                        productId: "123",
                        referrer: "10001",
                        define: "" // 自定义信息
                    }
                }
            });
        })()
    </script>
    <script>
        // var str = $(".input_c").html()

        var user = {
            config: {
                val: '',
                // str: '', //发送的普通文字
                advance: '', //预诊单
                followup: '', //随访单
            },
            init: function() {
                var _this = this;
                im.chatHeiht();
                im.onScrollTop();
                // 选项卡
                $(".tab_title li").click(function() {
                    var index = $(this).index();
                    $(".tab_title li").eq(index).addClass("t_active").siblings().removeClass("t_active");
                    $(".tab_content>div").hide().eq(index).show()
                })
                $(".chat_inpit .input_c").focus(function() {
                    // _this.chatOtherShow(false)
                    im.chatHeiht();

                })
                $(".chat_inpit .input_c").blur(function() {
                    im.chatHeiht();

                });

                // 点击发送
                $(".send_out2").click(function() {
                    var val = $(".chat_inpit .input_c").html();
                    console.log(val)
                    console.log(typeof(val))
                    im.sendText(val)
                    im.chatHeiht();
                });


                var u = navigator.userAgent;
                var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
                var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
                if (isiOS) {
                    $(".chat_inpit input").show();
                } else if (isAndroid) {
                    $(".chat_inpit input").hide();
                    $(".chat_inpit .icon_20").click(function() {
                        im.popupShow2(".android_up", true);
                        im.chatHeiht();
                    })
                }
                //点击图片
                $("#cameraInput").change(function() {
                    console.log(123)
                    var file = this.files[0];
                    im.chooseImg(file);
                    im.popupShow2(".android_up", false);
                    $(".imgBox").css("display", "block")
                    im.chatHeiht();
                });
                //点击图片
                $("#cameraInput1").change(function() {
                    // console.log(123)
                    var file = this.files[0];
                    im.chooseImg(file);
                    im.popupShow2(".android_up", false);
                    $(".imgBox").css("display", "block")
                    im.chatHeiht();
                });
                //点击图片
                $("#cameraInput2").change(function() {
                    // console.log(123)
                    var file = this.files[0];
                    im.chooseImg(file);
                    im.popupShow2(".android_up", false);
                    $(".imgBox").css("display", "block")
                    im.chatHeiht();
                });
                // 点击发送图片
                $(".imgBox").on("click", "span", function() {
                    // console.log(123)
                    var imgSrc = $(this).parent().children("img").attr("src");
                    im.sendImg(imgSrc);
                    im.chatHeiht();
                });
                //关闭相机相册选择控件
                $(".a_u_title span").last().click(function() {
                    im.popupShow2(".android_up", false);
                    im.chatHeiht();
                })

                // 关闭弹出层
                $(".backg").click(function() {
                    im.popupShow2(".android_up", false);
                    im.chatHeiht();
                })
            },

        }
        user.init()
    </script>
</body>

</html>